<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" type="text/css" href="css/dependency.css">
    <link rel="stylesheet" type="text/css" href="components/sidr/stylesheets/jquery.sidr.dark.css">
    <link rel="stylesheet" type="text/css" href="components/editor/editor.css">
</head>
<body>

<!-- A lot of Javascript here :) -->
<script type="text/javascript" src="components/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="components/underscore/underscore-min.js"></script>
<script type="text/javascript" src="components/d3/d3.js"></script>

<!-- ================================================= -->
<!-- ===========ACTUAL HTML           ================ -->
<!-- ================================================= -->

<form id="form">
    <label><input type="range" name="circle_size" min="1" max="50" value="15"/> Circle size</label><br>
    <label><input type="range" name="charge_multiplier" min="1" max="500" value="100"/> Charge multiplier</label><br>
    <label><input type="range" name="link_strength" min="0.1" max="100" value="7"/> Link strength</label><br>
    <label><input type="checkbox" name="show_texts_near_circles"/> Show names</label><br>
    <input id="search_input" placeholder="Type regexp to filter nodes" style="width:100%;"><br>
</form>

<!-- Add editor logic with button and everything else -->
<script type="text/javascript" src="components/sidr/jquery.sidr.js"></script>
<script type="text/javascript" src="components/ace/ace.js"></script>
<script type="text/javascript" src="components/editor/editor.js"></script>
<a id="simple-menu" class="editor-button" href="#sidr">Live editor</a>

<div id="chart">
    <!-- Here the SVG will be placed-->
</div>

<script type="text/javascript" src="origin.js"></script>
<script src="components/depvis/depvis-graph-actions-select.js"></script>
<script src="components/depvis/depvis-parse.js"></script>
<script src="components/depvis/depvis-config.js"></script>
<script src="components/depvis/depvis-visualizer.js"></script>
<script>

    //  ===================================================
    //  =============== CONFIGURABLE PARAMS  ==============
    //  ===================================================

    let config = dvconfig.create();

    const dvgraph = objcdv.parse_dependencies_graph(dependencies);
    const d3graph = dvgraph.d3jsGraph();

    var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight || e.clientHeight || g.clientHeight;

    //  ===================================================
    //  =============== http://d3js.org/ Magic ===========
    //  ===================================================

    const container = d3.select("#chart").append("svg")
        .attr("width", x)
        .attr("height", y)
        .style("overflow", "hidden");

    const svg = container.append('g');
    const actions = graph_actions.create(svg, dvgraph);
    let visualizer = dvvisualizer.create(svg, config, d3graph);
    visualizer.initialize();
    visualizer.setupZoom(container);


    //  ===================================================
    //  ===============  NODES SETUP     ==================
    //  ===================================================


    // Handling pressing
    visualizer.objectNodes
        .on("click", d => {
            if (d3.event.defaultPrevented) { return }
            actions.selectNodesStartingFromNode(d, 1);
            visualizer.reapply_charge_and_links()
        })
        .on("contextmenu", d => {
            if (d3.event.defaultPrevented) { return }
            // Don't actually show context menu
            d3.event.preventDefault();

            actions.selectNodesStartingFromNode(d);
            visualizer.reapply_charge_and_links()
        });


    /*
     Window resize update
     */
    w.onresize = () => {
        x = w.innerWidth || e.clientWidth || g.clientWidth;
        y = w.innerHeight || e.clientHeight || g.clientHeight;

        container.attr("width", Math.ceil(x)).attr("height", Math.ceil(y));
        visualizer.updateCenter(x / 2, y / 2);
    };


</script>

<script>
    //  ===================================================
    //  =============== INPUTS HANDLING      ==============
    //  ===================================================
    d3.selectAll("input").on("change", function change() {

        if (this.name === "circle_size") {
            config.default_circle_radius = parseInt(this.value);
            visualizer.updateRadiuses(parseInt(this.value));
        }

        if (this.name === "charge_multiplier") {
            let chargeMultiplier = parseInt(this.value);
            visualizer.reapply_charge(chargeMultiplier)
        }

        if (this.name === "link_strength") {
            let linkStrength = parseInt(this.value) / 10;
            visualizer.reapply_links_strength(linkStrength)
        }

        if (this.name === "show_texts_near_circles") {
            visualizer.updateTextVisibility(this.checked)
        }

    });
</script>


<script>
    //  ===================================================
    //  =============== LIVE FILTERING      ==============
    //  ===================================================

    function live_filter_graph(regexp, classname, invert) {
        classname = setDefaultValue(classname, "filtered");
        invert = setDefaultValue(invert, false);

        const re = new RegExp(regexp, "i");
        visualizer.allNodes
            .classed(classname, node => {
                let filtered = !node.name.match(re);
                filtered = invert ? !filtered : filtered;
                node.filtered = filtered;
                node.neighbours = !filtered;
                return filtered;
            })
            .transition();

        svg.selectAll('.link')
            .classed(classname, l => {
                let filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re));
                filtered = invert ? !filtered : filtered;
                return filtered;
            })
            .attr("marker-end", l => {
                let filtered = !(l.sourceNode.name.match(re) && l.targetNode.name.match(re));
                filtered = invert ? !filtered : filtered;
                return filtered ? "" : "url(#default)"
            })
            .transition()
    }


    d3.select("#search_input").on("input", function () {
        // Filter all items
        console.log("Input changed to" + this.value);
        actions.deselect_selected_node();

        if (this.value && this.value.length) {
            live_filter_graph(this.value, "filtered");
        }
        visualizer.reapply_charge_and_links();
    });
</script>
